<template>
	<div class="search-main">
		<div class="search-header">
			<div class="search-form">
				<div class="search-form-left">
					<el-input placeholder="请选择日期" icon="search"></el-input>
				</div>
				<div class="search-form-right">
					<el-button type="danger">搜索</el-button>
				</div>
			</div>
			<ul class="search-hot">
				<li><a href="/search/?words=AngularJS" target="_blank">AngularJS</a></li>
				<li><a href="/search/?words=mysql" target="_blank">mysql</a></li>
				<li><a href="/search/?words=java" target="_blank">java</a></li>
				<li><a href="/search/?words=android" target="_blank">android</a></li>
				<li><a href="/search/?words=C" target="_blank">C</a></li>
				<li><a href="/search/?words=php" target="_blank">php</a></li>
				<li><a href="/search/?words=javascript" target="_blank">javascript</a></li>
				<li><a href="/search/?words=ajax" target="_blank">ajax</a></li>
			</ul>
		</div>
		<div class="search-body">
			<span class="search-related">共找到 1702 个相关内容</span>
			<div class="course-item" v-for="i in 10">
				<a :href="handleAudit('A')" target="_blank">
					<img src="http://climg.mukewang.com/599a7ab8000179c506000338.jpg">
				</a>

				<div class="course-item-detail">
					<a :href="handleAudit('A')" target="_blank" style="text-decoration:none">
						<span style="cursor: pointer" class="highlight">JavaScript</span>基础入门
					</a>
					<div class="course-item-classify">
						<span>职业路径</span>
						<span>Web前端攻城狮培养计划</span>
						<span>2步&nbsp;/&nbsp;9课</span>
						<i class="course-study-number icon-set_sns"></i><span>78</span>
					</div>
					<p>带领你从<span class="highlight">JavaScript</span>语法开始，一步步深入其中，并完成经典的<span class="highlight">js</span>案例。</p>
				</div>

			</div>
		</div>
	</div>
</template>

<script>
	export default{
		name: 'search',
		data(){
			return{
			}	
		},
		methods: {
	     	handleAudit(a){
            	return `#/homePage/videoPlay`;
            },
	    }
	}
	
</script>

<style lang="less">
    .search-main{
    	margin-top:72px;
    }
	.search-main .search-header{
		height: 148px;
	    width: 100%;
	    background: #D9DDE1;
	    padding-top: 36px;
	    box-sizing: border-box;
	}
	.search-form{
		width:790px;
		margin:0 auto;
		overflow: hidden;
	}
	.search-hot{
		width:820px;
		margin:0 auto;
		list-style:none;
	}
	.search-hot li{
		float: left;
	    font-size: 12px;
	    color: #4D555D;
	    margin-top: 12px;
	    margin-right: 24px;
	}
	.search-hot li a{
		color:#14191e;
		text-decoration: none;
	}
	.search-hot li a:hover{
		color:#ec1500;
	}
	.search-main .search-header .search-form input{
		line-height: 48px !important;
		height:48px !important;
		text-indent: 24px;
		
	}
	.search-main .search-header .search-form button{
		font-size:16px !important;
		height:47px;
		width:104px;
		position: relative;
		left:-2px;
		-moz-border-top-left-radius: 0px;
		border-top-left-radius: 0px;
		-moz-border-bottom-left-radius: 0px;
		border-bottom-left-radius: 0px;

	}
	.search-main .search-header .search-form i{
		left:0;
	}
	.search-form-left{
		float:left;
		width:684px;
	}
	.search-form-right{
		float:left;
	}
	.search-body{
		margin:0 auto;
		width:840px;
	}
	.search-body .search-related{
		line-height: 48px;
	    float:right;
	    overflow:hidden;
	    color: #93999F;
	    font-size: 12px;
	}
	.course-item{
		width: 840px;
	    margin: 0 auto 8px;
	    padding-top: 24px;
	    padding-right: 32px;
	    padding-bottom: 24px;
	    background: #fff;
    	box-shadow: 0 4px 8px 0 rgba(7,17,27,.05);
    	box-sizing: border-box;
    	overflow:hidden;
	}
	.course-item img{
	    width: 210px;
	    height: 120px;
	    float: left;
	    margin-left: 32px;
	    margin-right: 32px;
	}
	.course-item .course-item-detail a{
		font-size: 16px;
    	line-height: 32px;
    	font-weight: 700;
    	text-decoration:none;
    	color:#222;
	}
	.course-item .course-item-detail .highlight{
		color:red;
	}
	.course-item .course-item-detail .course-item-classify{
		margin-top:4px;
		margin-bottom: 4px;
	}
	.course-item .course-item-detail .course-item-classify span{
		line-height: 24px;
	    color: #4D555D;
	    font-size: 12px;
	    margin-right: 24px;
	    padding-left: 2px;
	    vertical-align: middle;
	}
	.course-item .course-item-detail p{
		color: #4D555D;
    	font-size: 12px;
    	line-height: 24px;
	}
</style>